import React, { Component } from "react";

class Child extends Component {
  state = {
    count: 0,
    prevCount: 0,
    list: [1, 2, 3, 4, 5],
  };

  // 从props里面得到state
  // 根据一个props的值，始终得到一个state的值永远和这个props的值保持同步
  // 必须要加static关键字
  // 必须要有state
  // 必须要返回一个对象或者null, 返回的对象会和原来的state对象做合并
  static getDerivedStateFromProps(props, state) {
    console.log("getDerivedStateFromProps", props);
    // return null;
    // return {
    //   count: props.num,
    // };

    // props.num 10  state.prevCount 0 -> count 10 prevCount 10
    // props.num 20  state.prevCount 10 -> count 20 prevCount 20
    // props.num 20  state.prevCount 20 -> count 30 prevCount 30
    if (props.num === state.prevCount) {
      return {
        count: state.count,
        prevCount: state.count,
      };
    } else {
      return {
        count: props.num,
        prevCount: props.num,
      };
    }
  }

  fn = () => {
    this.setState({
      count: 30,
    });
  };

  push = () => {
    this.setState((prevState) => {
      return {
        list: prevState.list.concat(6),
      };
    });
  };

  render() {
    return (
      <>
        <div>child子组件</div>
        <p>count: {this.state.count}</p>
        <button onClick={this.fn}>child btn</button>
        <ul>
          {this.state.list.map((item) => (
            <li key={item}>{item}</li>
          ))}
        </ul>
        <button onClick={this.push}>push 6</button>
      </>
    );
  }

  // 在更新的时候，在render的后面执行
  // 在更新之前获得一条记录
  // 必须要去return一个值，给componentDidUpdate用
  // 调用时机是render函数调用之后，并且页面重新渲染之前
  // 只有可能return一些和ui(元素的css)相关的信息
  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log(
      "getSnapshotBeforeUpdate",
      document.querySelector("ul").offsetHeight
    );
    return document.querySelector("ul").offsetHeight;
  }

  // 页面重新渲染之后调用
  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log(
      "componentDidUpdate",
      document.querySelector("ul").offsetHeight,
      snapshot
    );
  }
}

export default Child;
